<template>
  <div class="fee-set">
    <div class="content">
      <div class="header flex-center">
        <span>手续费设置</span>
        <i class="iconfont iconguanbi" @click="$emit('cancel')"></i>
      </div>
      <div class="line flex-left">
        <label class="title">币种</label>
        <span>{{param.coin.name}}</span>
      </div>
      <div class="line flex-left">
        <label class="title">收取类型</label>
        <el-select
          v-model="param.fees_type"
          placeholder="请选择手续费类型"
          size="small"
          filterable
          @change="changeType()"
        >
          <el-option label="固定手续费" :value="1"></el-option>
          <el-option label="百分比手续费" :value="2"></el-option>
        </el-select>
      </div>
      <div class="line flex-left">
        <label class="title">手续费</label>
        <span v-if="param.fees_type===1">{{param.transaction_fees}}</span>
        <el-input v-model="param.transaction_fees" size="medium" placeholder="请输入手续费比例(%)" v-else></el-input>
        <span style="margin-left:10px" v-if="param.fees_type===2">%</span>
      </div>
      <div class="line flex-left">
        <label class="title">最低手续费</label>
        <el-input v-model="param.fees" size="medium" placeholder="请输入最低手续费"></el-input>
      </div>
      <div class="bottom">
        <el-button size="small" @click="$emit('cancel')">取 消</el-button>
        <el-button
          size="small"
          type="primary"
          @click="submit"
          :disabled="onSubmit"
          :loading="onSubmit"
        >确 定</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { feesSet } from "../../views/CoinsManage/Coins.service.js";
export default {
  props: ["operateData"],
  data() {
    return {
      param: {},
      onSubmit: false
    };
  },
  watch: {
    operateData: {
      handler(val) {
        this.param = JSON.parse(JSON.stringify(val));
        if (this.param.fees_type === 0) this.param.fees_type = "";
        if (this.param.fees_type === 2)
          this.param.transaction_fees = parseFloat(
            (this.param.transaction_fees * 100).toFixed(2)
          );
      },
      deep: true,
      immediate: true
    },
    "param.fees": {
      handler(val) {
        if (this.param.fees_type === 1)
          this.param.transaction_fees = this.param.fees;
        let index = val.indexOf(".");
        if (index > -1) {
          let n = val.substring(0, index + 1);
          let m = val.substring(index + 1, val.length);
          this.param.fees = m.length > 5 ? n + m.substring(0, 5) : n + m;
        }
      },
      deep: true
    }
  },
  methods: {
    async submit() {
      if (this.param.fees_type === "") {
        this.$notify.error({
          title: "提示",
          message: "请选择手续费收取类型"
        });
        return;
      }
      this.param.fees = Number(this.param.fees);
      this.param.transaction_fees = Number(this.param.transaction_fees);
      if (this.param.fees_type == 2)
        this.param.transaction_fees = this.param.transaction_fees / 100;
      const res = await feesSet(this.param);
      if (res.code === 0) {
        this.$notify.success({
          title: "提示",
          message: "设置成功"
        });
        this.$emit("success");
      }
    },
    changeType() {
      if (this.param.fees_type === 1)
        this.param.transaction_fees = this.param.fees;
    }
  }
};
</script>

<style lang="scss">
.fee-set {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba($color: #000000, $alpha: 0.3);
  z-index: 1001;
  .content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    min-width: 500px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    border-radius: 3px;
    .header {
      margin-bottom: 10px;
      padding: 15px 0;
      span {
        font-weight: 600;
        font-size: 18px;
      }
      i {
        position: absolute;
        right: 10px;
        font-size: 20px;
        cursor: pointer;
        transition: 0.2s;
      }
      i:hover {
        color: #409eff;
      }
    }
    .line {
      height: 60px;
      padding: 0 50px 0 30px;
      .title {
        width: 6em;
        text-align: right;
        margin-right: 20px;
        flex-shrink: 0;
      }
    }
    .bottom {
      margin: 30px auto;
      text-align: center;
    }
  }
}
</style>